<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    void main(){
      gl_Position = aPosition;
      gl_PointSize = 30.0;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    void main(){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `;
    // 封装后
    const program = initShader(gl,VERTEX_SHADER_SORUCE,FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program,'aPosition')
    gl.vertexAttrib4f(aPosition,0.5,0.5,0.0,1.0)

    let x=0
    setInterval(()=>{
        x+=0.1
        if (x>1.0){
            x=0
        }
        gl.vertexAttrib1f(aPosition,x)
        // 执行绘制
        gl.drawArrays(gl.POINTS, 0, 1);
    },200)


</script>

